<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度新闻</title>
    <link rel="stylesheet" href="./stylesheets/index.css">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"> -->
</head>

<body>
    <!-- 开头 -->
    <header>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2 col-sm-2 col-xs-4 center">
                    <dl class="headerleft">
                        <dt></dt>
                        <dd></dd>
                    </dl>
                </div>
                <div class="col-md-8 col-sm-8 col-xs-4 center">
                    <div class="logo">

                    </div>
                </div>
                <div class="col-md-2 col-sm-2 col-xs-4 center">
                    <dl class="headerright">
                        <dt></dt>
                        <dd></dd>
                    </dl>
                </div>


            </div>


        </div>

    </header>
    <!-- 内容 -->
    <article>
        <nav>
            <ul id="allnews">
                <li><a href="javascript:void(0)" id="infoNew">精选</a></li>
                <li><a href="javascript:void(0)" id="getlive">生活</a></li>
                <li><a href="javascript:void(0)">本地</a></li>
                <li><a href="javascript:void(0)">娱乐</a></li>
                <li><a href="javascript:void(0)">社会</a></li>
                <li><a href="javascript:void(0)">军事</a></li>

            </ul>
        </nav>
        <nav>
            <ul>
                <li><a href="">女人</a></li>
                <li><a href="">搞笑</a></li>
                <li class="two-li"><a href="">互联网</a></li>
                <li><a href="">科技</a></li>
                <li><a href="">更多</a></li>

            </ul>
        </nav>

    </article>
    <div class="content">
        <ul>
            <li>

            </li>
        </ul>
    </div>
    <!-- <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> -->
    <!-- <script src="//cdn.bootcss.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> -->
    <!-- <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> -->
    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.4/js/bootstrap.js"></script>
    <script type="text/javascript">
        // 全部新闻
        $(document).ready(function() {
            function allNes(rows) {
                $.ajax({
                    url: '/looknews',
                    type: 'get',
                    success: function(rows) {
                        for (let i = 0; i < rows.length; i++) {
                            $("<li></li>").appendTo($(".content ul"))
                            $("<img/ src = " + rows[i].img + ">").appendTo($(".content ul li").eq(i))
                            $("<h4></h4>").text(rows[i].title).appendTo($(".content ul li").eq(i))
                            $("<p></p>").text(rows[i].time).appendTo($(".content ul li").eq(i))
                        }
                    }
                })
            }

            $("#infoNew").click(function(event) {
                $(".content ul li").remove();
                allNes();
            });

            // 分类
            $('#allnews li').click(function(rows) {
                var index = $(this).index();
                //  alert(index)
                $(".content ul li").remove();
                $.ajax({
                    url: '/looknews',
                    type: 'get',
                    success: function(rows) {
                        fun(rows, index)
                    }
                })

            });
            //分类函数 
            function fun(rows, index) {
                var arr = ['精选', '生活', '文化', '娱乐', '社会', '军事']
                var j = 0;
                for (let i = 0; i < rows.length; i++) {
                    if (rows[i].src == arr[index]) {
                        $("<li></li>").appendTo($(".content ul"))
                        $("<img/ src = " + rows[i].img + ">").appendTo($(".content ul li").eq(j))
                        $("<h4></h4>").text(rows[i].title).appendTo($(".content ul li").eq(j))
                        $("<p></p>").text(rows[i].time).appendTo($(".content ul li").eq(j))
                        j++
                    }
                }
            }
            // 初始化
            allNes();

        });
    </script>
</body>

</html>